<template>
  <div class="p-3">
    <d-table
      ref="table"
      row-key="id"
      :params="formData"
      :loading="loading"
      :columns="columns"
      :getData="getList"
      :hasColumnControl="false"
    >
      <template #topContent>
        <t-form class="table-form" :data="formData" layout="inline" @submit="getData">
          <t-form-item label="姓名">
            <t-input v-model="formData.name" placeholder="请输入" clearable></t-input>
          </t-form-item>
          <t-form-item label="电话">
            <t-input v-model="formData.phoneNumber" placeholder="请输入" clearable></t-input>
          </t-form-item>
          <t-form-item label="身份证号">
            <t-input v-model="formData.idNumber" placeholder="请输入" clearable></t-input>
          </t-form-item>
          <t-button type="submit">搜索</t-button>
          <t-button class="ml-3" @click="handleEdit()">添加</t-button>
          <t-button theme="default" variant="outline" class="ml-3" @click="handleExport"
            >导出</t-button
          >
          <t-button theme="default" variant="outline" class="ml-3" @click="handleImport"
            >导入</t-button
          >
        </t-form>
      </template>
      <template #operation="{ row }">
        <t-link theme="primary" hover="color" @click="handleEdit(row)"> 编辑 </t-link>
        <d-pop-btn class="ml-2 c-red" tips="是否确认删除该菜单？" @click.stop="handleDel(row)"
          >删除</d-pop-btn
        >
      </template>
    </d-table>
    <add ref="dialog" @success="getData" />
    <qrDialog ref="qrDialogRef" />
    <importFiles ref="importFilesRef" @upload-success="handleUploadSuccess" />
  </div>
</template>

<script setup lang="jsx">
import add from './add.vue'
import qrDialog from './qr_dialog.vue'
import { ref, computed } from 'vue'
import { del, get } from '@common'
import { download } from '@/utils'
import { useDict } from '@/store/dict'
import { MessagePlugin } from 'tdesign-vue-next'
import importFiles from '@/components/importFiles.vue'
const table = ref(null)
const importFilesRef = ref(null)
const formData = ref({})
const dialog = ref(false)
const qrDialogRef = ref(null)
const dict = useDict()
const loading = ref(false)
const columns = computed(() => {
  return [
    { title: '序号', colKey: 'dIndex', width: 50 },
    {
      title: 'ID',
      colKey: 'id',
      width: 80,
      ellipsis: true
    },
    {
      title: '嘉宾类型',
      colKey: 'guestType',
      width: 100,
      ellipsis: true
      // cell: (_, { row }) => {
      //   const { guestType } = row
      //   return ['普通嘉宾', 'VIP', 'SVIP'][guestType]
      // }
    },
    {
      title: '姓名',
      colKey: 'name',
      width: 100,
      ellipsis: true
    },
    {
      title: '电话',
      colKey: 'phoneNumber',
      width: 140
    },
    {
      title: '身份证号',
      colKey: 'idNumber',
      width: 200,
      ellipsis: true
    },
    {
      title: '票型',
      colKey: 'ticketType',
      width: 140
    },
    {
      title: '座位区域',
      colKey: 'seatNumber',
      width: 140
    },
    {
      title: '晚宴桌号',
      colKey: 'tableNumber',
      width: 140
    },
    {
      title: '二维码',
      colKey: 'qrCode',
      width: 140,
      cell: (_, { row }) => {
        const { qrCode } = row
        return (
          <div class="c-p cursor-pointer" onClick={(e) => handleShowQrCode(row)}>
            查看
          </div>
        )
      }
    },
    {
      title: '状态',
      colKey: 'status',
      width: 100,
      cell: (_, { row }) => {
        const { status } = row
        return status == '1' ? (
          <t-tag theme="primary">已签到</t-tag>
        ) : (
          <t-tag theme="danger">未签到</t-tag>
        )
      }
    },
    { title: '创建时间', colKey: 'createTime', width: 170 },
    { title: '操作', colKey: 'operation', width: 190, fixed: 'right' }
  ]
})
const getData = async () => {
  table.value.getData()
}
const getList = async (params) => {
  loading.value = true
  try {
    const res = await get('basic/guest/list', {
      ...params
    })
    loading.value = false
    return res
  } catch (err) {
    loading.value = false
    return {
      data: []
    }
  }
}
const handleEdit = (row) => {
  dialog.value.show(row)
}
const handleDel = async (item) => {
  await del(`basic/guest/${item.id}`)
  MessagePlugin.success('操作成功')
  getData()
}
const handleImport = () => {
  importFilesRef.value.show()
}
// 上传成功back
const handleUploadSuccess = (res) => {
  getData()
}
const handleExport = async () => {
  await download(
    `basic/guest/export`,
    {
      ...formData.value
    },
    `贵宾.xlsx`
  )
}
const handleShowQrCode = async (row) => {
  qrDialogRef.value.show(row)
}
</script>
